<template>
  <div class="meal">
    <ball-header absolute :leftArrow="false" :border="false" z-index="5" backColor="transparent">
      <div @click="$router.back(-1)" slot="left"><van-icon name="arrow-left" size="24" color="#ffffff" /></div>
    </ball-header>
    <div class="swipe">
      <van-swipe class="swipeContainer">
        <van-swipe-item>
          <img v-lazy="mealList.pic" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="part01 acea-row row-between-wrapper">
      <div class="left acea-row row-column">
        <span class="title">{{mealList.title}}</span>
        <!-- <div class="price acea-row row-bottom" >￥{{userInfo?(userInfo.member.isvip==1?mealList.member_price:mealList.guest_price):mealList.guest_price}}/<p>人起</p></div> -->
        <div class="price acea-row row-bottom" >￥{{mealList.guest_price}}/<p>人起</p></div>
        <!-- <div class="price acea-row row-bottom" v-if="mealList.status == 2">选择时间</div> -->
        <!-- <div class="price acea-row row-bottom" v-if="mealList.status == 0">暂无</div> -->
      </div>
      <router-link :to="routerUrl+'/destineMeal'" v-if="mealList.status == 1">
        <van-button type="info" size="small">预订</van-button>
      </router-link>
      <div v-else>
        <van-button type="info" size="small" disabled>预订</van-button>
      </div>
    </div>
    <div class="part02 wapper">
      <router-link :to="routerUrl+'/chooseDate'" tag="div" class="header acea-row row-middle">
        <van-icon size="18" name="flag-o" />
        <span>选择出行时间</span>
        <div class="chooseTime acea-row row-middle row-right">
          <div>{{mealDate.title}} </div>
          <van-icon name="arrow" size="16" />
        </div>
      </router-link>
      <!-- <div class="content">
        <div class="list acea-row row-middle">
          <div class="item acea-row row-middle row-column" :class="part02_idx==index?'act':''" v-for="(item,index) in 6" :key="index" @click="part02_idx = index">
            <span>01/06 周三</span>
            <p>￥3310</p>
          </div>
        </div>
      </div> -->
    </div>  
    <div class="part03 wapper">
      <div class="header acea-row row-middle">
        <van-icon size="18" name="flag-o" />
        <span>行程说明</span>
      </div>
      <div class="content acea-row row-column">
        <div class="item">{{mealList.subscribeinfo}}</div>
      </div>
      <div class="header acea-row row-middle">
        <van-icon size="18" name="flag-o" />
        <span>价格包含</span>
      </div>
      <div class="content acea-row row-column">
        <div class="item">{{mealList.pricecontain}}</div>
      </div>
      <div class="header acea-row row-middle">
        <van-icon size="18" name="flag-o" />
        <span>套餐图文</span>
      </div>
      <div class="content">
        <span class="item" v-html="mealList.content"></span>
      </div>
    </div>
  </div>
</template>

<script>
import ballHeader from 'components/header'
import banner01 from 'static/images/ball-banner01.jpeg'
import api from 'api'
import config from 'api/config.js'
import moment from 'moment'

export default {
  components:{
    ballHeader
  },
  data() {
    return {
      routerUrl:config.routerUrl,
      detail:{},  //套餐详情
      banner01,
      part02_idx:"",
      dateXinqi:moment(new Date().valueOf()).format("E"),
    }
  },
  created() {
    let meal_id = this.$route.params.id
    if(!this.mealList.id){
      this.$store.dispatch("meal/getMealDetail",meal_id).then(()=>{
        this.getFirstMealData()
      })
    }
  },
  activated() {
    let meal_id = this.$route.params.id
    let meal_teetime = sessionStorage.getItem("meal_teetime")
    // console.log("activated",meal_teetime,meal_id,sessionStorage.getItem("meal_id"),sessionStorage.getItem("meal_id") == null)
    if(meal_id != sessionStorage.getItem("meal_id") || sessionStorage.getItem("meal_id") == null){
      this.$store.dispatch("meal/getMealDetail",meal_id).then(()=>{
        if(meal_teetime == null){
          this.getFirstMealData()
        }else{
          this.$store.commit('meal/setData',JSON.parse(meal_teetime))
        }
      })
    }
  },
  methods: {
    getFirstMealData(){
      // let date = parseInt(moment(new Date()).startOf('day').add(1,'days').format('X').valueOf()) + parseInt(Number(this.limitTime.starttime))*3600
      let date = Number(moment(new Date()).startOf('day').add(1,'days').format('x').valueOf())
      let time = this.$store.state.yuding.limitTime.starttime

      let m = moment(date).format("MMM")
      let d = moment(date).format("DD")
      let xinqi = moment(date).format("dddd")
      let e = moment(date).format("E")
      let title = m+d+" "+xinqi
      let o = {}
      o.date = {
        date:Math.floor(date/1000),
        e,
        title
      }
      o.time = {
        time,
        title:time+'点'
      }
      sessionStorage.setItem("meal_teetime",JSON.stringify(o))
      this.$store.commit('meal/setData',o)
    },
  },
  computed:{
    userInfo(){
      return this.$store.state.user.userInfo
    },
    mealDate(){
      return this.$store.state.meal.courseDate
    },
    mealTime(){
      return this.$store.state.meal.courseTime
    },
    mealList(){
      return this.$store.state.meal.list
    },
  }
}
</script>

<style scoped>
  .meal{
    min-height: 100vh;
    background-color: #f2f3f5;
  }
  .meal .swipe{
    width: 100%;
    height: 300px;
  }
  .meal .swipe .swipeContainer{
    width: 100%;
    height: 100%;
  }
  .meal .swipe .swipeContainer >>> img{
    width: 100%;
    height: 100%;
  }
  .meal .part01{
    padding: 20px 30px 30px 30px;
    background-color: #ffffff;
  }
  .meal .part01 .left .title{
    font-size: 26px;
  }
  .meal .part01 .left .price{
    font-size: 26px;
    color: #ff6600;
    margin-top: 20px;
  }
  .meal .part01 .left .price p{
    font-size: 20px;
  }
  .meal .part02{
    margin-top: 20px;
    padding: 0 20px;
    background-color: #ffffff;
  }
  .meal .part02 .content{
    width: 100%;
  }
  .wapper .header{
    padding: 20px 0;
    border-bottom: 1px solid #dddddd;
  }
  .wapper .header span{
    font-size: 26px;
    margin-left: 10px;
  }
  .meal .part02 .header{
    border-bottom: none;
  }
  .meal .part02 .header .chooseTime{
    flex: 1;
    font-size: 26px;
  }
  .meal .part02 .content {
    height: 170px;
    overflow-y: hidden;
  }
  .meal .part02 .content .list{
    overflow-y: hidden;
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    height: 125px;
    padding: 25px 0;
  }
  .meal .part02 .content .list .item{
    border-radius: 10px;
    border: 1px solid #dddddd;
    padding: 20px;
    font-size: 28px;
    margin-right: 20px;
    height: 80px;
  }
  .meal .part02 .content .list .item p{
    margin-top: 20px;
    color: #ff6600;
  }
  .meal .part02 .content .list .act{
    border: 1px solid #3d93ec;
  }
  .meal .part03{
    background-color: #ffffff;
    margin-top: 20px;
    padding: 0 20px;
  }
  .meal .part03 .content{
    width: 100%;
    padding: 25px 25px 25px 25px;
    box-sizing: border-box;
    text-align: justify;
  }
  .meal .part03 .content .item{
    font-size: 28px;
    margin-bottom: 20px;
    line-height: 32px;
    text-indent: 20px;
  }
  .meal .part03 .content .item >>> img{
    width: 100%;
    height: 100%;
    display: block;
  }
</style>